<template>
  <div class="iframe">
    <div class="i-title">
      <h3>watch 侦听</h3>
    </div>
    <div class="i-tip">
      <el-input type="text" v-model="str" />
    </div>
    <div class="i-tip">
      {{strTip}}
    </div>
    <div class="i-tip">
      {{strTip2}}
    </div>
  </div>
</template>

<script setup>
import { ref, watch, reactive, onMounted } from 'vue'
let str = ref("...");
let str2 = ref("...");
let strTip = ref("...");
let strTip2 = ref("...");
let stu = reactive({
  name: "精英中学",
  grade: {
    name: "一年级",
    cls: {
      name: "3班",
      stuinfo: {
        name: "王小波",
        score: 60
      }
    }
  }
})

watch([str, str2], (newValue, oldValue) => {
  strTip.value = newValue;
}, {
  immediate: true
})

watch(() => stu.grade.cls.stuinfo.score, (newValue, oldValue) => {
  strTip2.value = newValue;
}, {
  immediate: true
})

setTimeout(() => {
  str.value = "高二(1)班 李明明";
  str2.value = "期中考试全校第5名";
}, 2000)

setTimeout(() => {
  str2.value = "期末考试全校第1名";
}, 5000)

setTimeout(() => {
  stu.grade.cls.stuinfo.score = 100;
  str2.value = "恭喜，恭喜！";
}, 8000)

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
